<template>
  <div class="att-att">
    <div class="att-nav">
      <div class="att-header">
        <div class="verticalLine"></div>考勤记录
      </div>
      <div class="att-select">
        <div class="select">
          <span>选择人员类型：</span>
          <el-select v-model="value1" placeholder="请选择" @change="personnelType">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="att-table">
        <table>
          <thead>
            <th>序号</th>
            <th>父项目名称</th>
            <th>子项目名称</th>
            <th>用户姓名</th>
            <th>到岗情况</th>
            <th>居住地</th>
            <th>抵达工作地点方式</th>
            <th>车次</th>
            <th>乘车日期</th>
            <th>抵达工作地日期</th>
            <th>当日体温</th>
            <th>口罩佩戴情况</th>
            <th>个人健康状况</th>
            <th>是否与疑似或确诊病人接触</th>
            <th>家庭成员健康状况</th>
            <th>个人冠状病毒诊断结果</th>
            <th>家庭成员冠状病毒诊断结果</th>
            <th>隔离情况</th>
            <th>填报人姓名</th>
            <th>填报时间</th>
            <th>更新时间</th>
            <th>操作</th>
          </thead>
          <tbody v-if="xiangmu">
            <tr align="center" v-for="(item,index) in tableData" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.parentProjName}}</td>
              <td>{{item.subProjName}}</td>
              <td>{{item.createUsername}}</td>
              <td>{{item.isWork}}</td>
              <td>{{item.home}}</td>
              <td>{{item.trafficTools}}</td>
              <td>{{item.trainNum}}</td>
              <td>{{item.dateOfRide}}</td>
              <td>{{item.arrivalDate}}</td>
              <td>{{item.temperature}}</td>
              <td>{{item.isMask}}</td>
              <td>{{item.personalHealth}}</td>
              <td>{{item.perContact}}</td>
              <td>{{item.homeHealth}}</td>
              <td>{{item.perResult}}</td>
              <td>{{item.homeResult}}</td>
              <td>{{item.isQuarantine}}</td>
              <td>{{item.createUsername}}</td>
              <td>{{item.createTime}}</td>
              <td>{{item.upTime}}</td>
              <td>
                <img src="../../assets/images/fill-view.png" @click="handleClick(item)" />
              </td>
            </tr>
          </tbody>
          <tbody v-if="shigong">
            <tr align="center" v-for="(item,index) in tableData" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.parentProjName}}</td>
              <td>{{item.subProjName}}</td>
              <td>{{item.name}}</td>
              <td>{{item.isWork}}</td>
              <td>{{item.home}}</td>
              <td>{{item.trafficTools}}</td>
              <td>{{item.trainNum}}</td>
              <td>{{item.dateOfRide}}</td>
              <td>{{item.arrivalDate}}</td>
              <td>{{item.temperature}}</td>
              <td>{{item.isMask}}</td>
              <td>{{item.personalHealth}}</td>
              <td>{{item.perContact}}</td>
              <td>{{item.homeHealth}}</td>
              <td>{{item.perResult}}</td>
              <td>{{item.homeResult}}</td>
              <td>{{item.isQuarantine}}</td>
              <td>{{item.createUsername}}</td>
              <td>{{item.createTime}}</td>
              <td>{{item.upTime}}</td>
              <td>
                <img src="../../assets/images/fill-view.png" @click="handleClick(item)" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-noData" v-if="tableData.length===0">暂无数据</div>
      </div>
      <div class="paging">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[14]"
          :page-size="14"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div class="addPopup" v-if="isBlock">
      <div class="addFrom">
        <div class="att-header">
          <div class="verticalLine"></div>考勤查看
          <svg title="关闭" class="iconsousuo ic" aria-hidden="true" @click="Return">
            <use xlink:href="#iconfill-closed" />
          </svg>
        </div>
        <ul>
          <li>
            <span>父项目名称</span>
            <el-input v-model="input1" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>子项目名称</span>
            <el-input v-model="input2" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>姓名</span>
            <el-input v-model="input3" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>到岗情况</span>
            <el-input v-model="input4" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>居住地</span>
            <el-input v-model="input5" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>抵达工作地点方式</span>
            <el-input v-model="input6" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>车次</span>
            <el-input v-model="input7" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>

          <li>
            <span>乘车日期</span>
            <el-input v-model="input8" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>抵达工作地日期</span>
            <el-input v-model="input9" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>

          <li>
            <span>当日体温</span>
            <el-input v-model="input10" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>口罩佩戴情况</span>
            <el-input v-model="input11" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>个人健康状况</span>
            <el-input v-model="input12" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>隔离情况</span>
            <el-input v-model="input18" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>

          <li>
            <span>填报人名称</span>
            <el-input v-model="input19" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>填报时间</span>
            <el-input v-model="input20" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>更新时间</span>
            <el-input v-model="input22" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>个人诊断结果</span>
            <el-input v-model="input16" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>曾与疑/确诊病人接触</span>
            <el-input v-model="input13" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>家庭成员健康状况</span>
            <el-input v-model="input14" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>曾与疑/确诊病人家人接触</span>
            <el-input v-model="input15" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <li>
            <span>家庭成员诊断结果</span>
            <el-input v-model="input17" :readonly="true" style="margin-top: 8px;"></el-input>
          </li>
          <!-- <li>
        <span>更新人</span>
        <el-input v-model="input21" ::readonly="true" style="margin-top: 8px;"></el-input>
          </li>-->
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {
  projectSide,
  constructor
} from "@/service/attendanceInformation/index";
export default {
  data() {
    return {
      isBlock: false,
      xiangmu: true,
      shigong: false,
      total: null,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      input7: "",
      input8: "",
      input9: "",
      input10: "",
      input11: "",
      input12: "",
      input13: "",
      input14: "",
      input15: "",
      input16: "",
      input17: "",
      input18: "",
      input19: "",
      input20: "",
      input22: "",
      value1: "项目公司",
      tableData: [],
      options1: [
        {
          value: "项目公司",
          label: "项目公司"
        },
        {
          value: "建设单位 ",
          label: "建设单位"
        }
      ]
    };
  },
  methods: {
    personnelType(value1) {
      // window.console.log(value1);
      if (value1 === "项目公司") {
        const param = {
          current: "1",
          size: "14",
          userId: window.sessionStorage.getItem("id")
        };
        projectSide(param).then(res => {
          this.tableData = res.data.obj.records;
          this.total = res.data.obj.total;
          this.xiangmu = true;
          this.shigong = false;
        });
      } else {
        const param = {
          current: "1",
          size: "14",
          userId: window.sessionStorage.getItem("id")
        };
        constructor(param).then(res => {
          this.tableData = res.data.obj.records;
          this.total = res.data.obj.total;
          this.xiangmu = false;
          this.shigong = true;
        });
      }
    },
    handleCurrentChange(val) {
      // window.console.log(`当前页: ${val}`);
      if (this.value1 === "项目公司") {
        const param = {
          current: val,
          size: "14",
          userId: window.sessionStorage.getItem("id")
        };
        projectSide(param).then(res => {
          this.tableData = res.data.obj.records;
          this.total = res.data.obj.total;
        });
      } else {
        const param = {
          current: val,
          size: "14",
          userId: window.sessionStorage.getItem("id")
        };
        constructor(param).then(res => {
          this.tableData = res.data.obj.records;
          this.total = res.data.obj.total;
        });
      }
    },
    //查看
    handleClick(item) {
      this.isBlock = true;
      this.input1 = item.parentProjName;
      this.input2 = item.subProjId;
      this.input3 = item.name;
      this.input4 = item.isWork;
      this.input5 = item.home;
      this.input6 = item.trafficTools;
      this.input7 = item.trainNum;
      this.input8 = item.dateOfRide;
      this.input9 = item.arrivalDate;
      this.input10 = item.temperature;
      this.input11 = item.isMask;
      this.input12 = item.personalHealth;
      this.input13 = item.perContact;
      this.input14 = item.homeHealth;
      this.input15 = item.homeContact;
      this.input16 = item.perResult;
      this.input17 = item.homeResult;
      this.input18 = item.isQuarantine;
      this.input19 = item.createUsername;
      this.input20 = item.createTime;
      this.input22 = item.upTime;
    },
    Return() {
      this.isBlock = false;
    }
  },
  created: function() {
    const param = {
      current: "1",
      size: "14",
      userId: window.sessionStorage.getItem("id")
    };
    projectSide(param).then(res => {
      // window.console.log(res)
      this.tableData = res.data.obj.records;
      this.total = res.data.obj.total;
    });
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/attendanceInformation/attendanceInformation.scss";
</style>
<style>
.s-tip {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #707070;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
}
</style>